<template>
	<view class="content">
		
		<!-- 貌似没必要 -->
		<!-- <view class="open-view" v-if="!commentShow">
			<view class="click-view" @click="toComplaintRecord">提交记录</view>
		</view> -->
		
		<view style="font-size: 28rpx;">TA的身份</view>
		<view class="typeView">
			<axb-check-box :list="typeList" @change="chosePetType"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">性别</view>
		<view class="sexView">
			<axb-check-box :list="sexList" @change="choseSex"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">手机号 / 微信号</view>
		<view class="titleView"><input type="text" v-model="petInfo.wechat" placeholder="请填写手机号或微信号" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">所在城市</view>
		<!-- 选择城市 -->
		<view class="city-view" @click="showCity = true">
			<pickerAddress v-model="addressShow" @confirm="addresspick" />
			<view class="city">{{city}}</view>
		</view>
		<chose-city @selectCity="selectCity" v-if="showCity" @closeModal="closeModal"></chose-city>
		
		<view class="addressView"><input type="text" v-model="petInfo.address" placeholder="详细地址" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">举报内容</view>
		<view class="contentView">
			<textarea maxlength="200" v-model="petInfo.content" placeholder="请描述举报TA的原因"></textarea>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">上传图片</view>
		<view style="font-size: 24rpx;margin-top: 6rpx;color: #999999;">(最多上传8张图片，单张图片大小不能超过10MB)</view>
		<view class="imgView" @click="choseImg()" v-if="imgArr.length === 0">
			<image src="../../static/upload.png"></image>
		</view>
		<!-- 预览图片 -->
		<view class="preImage" v-if="imgArr.length !== 0">
			<view v-for="(item, index) in imgArr" :key="index" style="float: left;margin-left: 20rpx;">
				<image mode="aspectFill" :src='item' @click="previewImg(item)"></image>
				<image @click="deleteImg(item)" style="width: 30rpx;height: 30rpx;margin-bottom: 130rpx;margin-left: -6rpx;" src="../../static/x.png"></image>
			</view>
			<view></view>
			<!-- <view @click="choseImg()" class="addView">
				<image src="../../static/add2.png"></image>
			</view> -->
			<!-- <view class="addView">
				<image src="../../static/add2.png"></image>
			</view> -->
		</view>
		

		<view class="bottom-view">
			<button class="confirm-btn" @click="submit(petInfo)">提交</button>
		</view>

	</view>
</template>

<script>
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue'
	import choseCity from "@/components/chose-city/chose-city"
	import http from '@/api/backend.js'
	export default {
		components: {
			axbCheckBox,
			choseCity
		},
		data() {
			return {
				showCity: false,
				typeList: [{
						name: "领养人",
						value: "1",
						checked: 0
					},
					{
						name: "送养人",
						value: "2",
						checked: 0
					}
				],
				sexList: [{
						name: "男孩",
						value: "1",
						checked: 0
					},
					{
						name: "女孩",
						value: "2",
						checked: 0
					},
					{
						name: "未知",
						value: "3",
						checked: 0
					}
				],
				addressShow: false,
				city: "选择城市",
				imgArr: [],
				petInfo: {},
				openId: ""
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo')
			this.openId = userInfo.openId
			this.petInfo.phone = userInfo.phone
		},
		methods: {
			addresspick(obj) {
				let addr = obj.province.AreaName +" "+ obj.area.AreaName +" "+ obj.city.AreaName
				this.city = addr
				this.petInfo.city = obj.city.AreaName
			},
			choseImg() {
				var me = this;
				var serverUrl = this.serverUrl;
				uni.chooseImage({
					count: 8,
					sizeType: ['original', 'compressed'],
					success: function(res) {
						let arr = res.tempFiles
						for(let i = 0; i < arr.length; i++) {
							if(arr[i].size > 10458760) {
								uni.showToast({
									title: "图片过大",
									icon: 'error'
								});
								return
							}
						}
						uni.showLoading({title: "上传中"});
						http.uploadFile(res.tempFilePaths).then(picRes => {
							me.petInfo.images = picRes
							me.imgArr = picRes
							uni.hideLoading()
							uni.showToast({
								title: "上传成功",
								icon: 'success'
							});
						})
					}
				});
			},
			previewImg(item) {
				uni.previewImage({
					current: item,
					urls: this.imgArr
				})
			},
			deleteImg(item) {
				http.deletePic({picture: item}).then(res => {
					if(res.success) {
						let arr = this.imgArr
						this.imgArr = arr.filter(function(i) {
						    return i != item
						});
						return;
					}
					this.error()
				})
			},
			chosePetType: function(value) {
				this.petInfo.type = value
			},
			choseSex: function(value) {
				this.petInfo.sex = value
			},
			chosePhysicalCondition: function(value) {
				this.petInfo.physicalCondition = value
			},
			choseAge: function(value) {
				this.petInfo.age = value
			},
			choseConditions: function(value) {
				this.petInfo.conditions = value
			},
			// 提交
			submit() {
				this.petInfo.userId = this.openId
				this.petInfo.status = '1'
				console.log('data', this.petInfo)
				if(!this.paramCheck()) return
				http.addComplaint(this.petInfo).then(res => {
					if(res.success) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						})
						return;
					}
					this.error()
				})
			},
			error() {
				uni.showToast({
					title: '接口请求异常',
					icon: 'error',
					duration: 2000
				})
			},
			// 选择城市
			selectCity(item) {
				this.city = item.name
				this.petInfo.city = item.name
				this.showCity = false
			},
			closeModal() {
				this.showCity = false
			},
			paramCheck() {
				if(this.openId == null || this.openId == "") {
					uni.showToast({title: '您还未登录',icon: 'none'});
					return false
				}
				if(this.petInfo.type == null || this.petInfo.type == "") {
					uni.showToast({title: '请选择身份',icon: 'none'});
					return false
				}
				if(this.petInfo.sex == null || this.petInfo.sex == "") {
					uni.showToast({title: '请选择性别',icon: 'none'});
					return false
				}
				if(this.petInfo.wechat == null || this.petInfo.wechat == "") {
					uni.showToast({title: '请填写手机号或微信号',icon: 'none'});
					return false
				}
				if(this.petInfo.city == null || this.petInfo.city == "") {
					uni.showToast({title: '请选择所在城市',icon: 'none'});
					return false
				}
				if(this.petInfo.address == null || this.petInfo.address == "") {
					uni.showToast({title: '请填写详细地址',icon: 'none'});
					return false
				}
				if(this.petInfo.content == null || this.petInfo.content == "") {
					uni.showToast({title: '请填写举报内容事',icon: 'none'});
					return false
				}
				if(this.petInfo.images == null || this.petInfo.images == "") {
					uni.showToast({title: '请上传图片',icon: 'none'});
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 15rpx;
	}

	.imgView {
		width: 240rpx;
		height: 240rpx;
		background-color: #f1f1f1;
		display: flex;
		border-radius: 10rpx;
		margin-top: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			align-self: center;
			margin: 0 auto;
		}
	}
	.preImage {
		margin-left: -20rpx;
		margin-top: 20rpx;
		
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			
		}
		
		.addView {
			width: 160rpx;
			height: 160rpx;
			// background-color: #f1f1f1;
			display: flex;
			margin-left: 20rpx;
			
			image {
				width: 80rpx;
				height: 80rpx;
				align-self: center;
				margin: 0 auto;
			}
		}
	}

	.nicknameView,
	.phoneView,
	.titleView,
	.breedView,
	.addressView {
		margin-top: 20rpx;

		input {
			font-size: 24rpx;
		}
	}

	.typeView,
	.sexView,
	.bodyView,
	.ageView,
	.conditionView {
		margin-left: -20upx;
		margin-top: 20rpx;
	}

	.city-view {
		.city {
			display: inline-block;
			height: 50upx;
			line-height: 50upx;
			padding: 0 22upx;
			border-radius: 8upx;
			font-size: 22upx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background: #f7f7f7;
		}
	}

	.contentView {

		textarea {
			margin-top: 20rpx;
			font-size: 24rpx;
			background-color: #f8f8f8;
			width: 90%;
			margin: 0 auto;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
		}
	}

	.bottom-view {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.confirm-btn {
			float: left;
			border-radius: 40rpx;
			background-color: #F8A323;
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	
	.open-view {
		margin-top: 20upx;
		margin-bottom: 80upx;
		
		.click-view {
			color: #d48b1e;
			float: left;
			font-size: 28rpx;
		}
	}
</style>
